<template>
  <div class="list">
    <header>
      我的收藏
    </header>

    <section v-if="isLogin">
      <p v-if="result.length == 0"> 暂无收藏歌曲 ~~ </p>
      <ul v-else>
        <li v-for="item in result" :key="item.id">
          <router-link :to="{ path: '/detail',query: {id: item.id,type:'collect'} }">
            <div class="left">
              <img  :src="item.picUrl"  :alt="item.picUrl">
            </div>
            <div class="right">
              <h3>{{item.name}}</h3>
              <div v-if="item.artists">
                    <span v-for="(opt,i) in item.artists" :Key="i">{{ opt?.name }} </span>
              </div>
            </div>
          </router-link>
        </li>
      </ul>
    </section>
    <section v-else>
      <p> 您还没有登录 ~~ </p>
    </section>
  </div>
</template>

<style lang="less">
@import '../common/less/varible.less';
.list {
  padding-bottom: 80px;
  header {
    padding: @pad;
    height: 50px;
    line-height: 50px;
    background-color: @bgColor;
    color: #fff;
    font-size: 18px;
  }

  // 在编写CSS3样式选择器的时候，不建议嵌套的层次太多，不利于渲染
  section {
    a {
      display: flex;
      width: 100%;
      padding: 10px 0;
      border-bottom: 1px solid #f0f0f0;
      .left {
        img {
          width: 80px;
          height: 80px;
          border-radius: 5px;
        }
      }
      .right {
        width: calc(100% - 80px);
        padding: 0 10px;
        h3 {
           font-weight: normal;
           font-size: 20px;
        }

        div {
          font-size: 18px;
          margin-top: 10px;
        }
      }
    }

    ul {
      li {
        padding: @pad;
      }
    }

    p {
      font-family: Arial, Helvetica, sans-serif;
      text-align: center;
      padding: 50px 0;
      font-size: 18px;
      color: #666;
    }
  }
}
</style>


<script>

export default {
    data(){
      return {
          result: [],
          isLogin: false
      }
    },
    created(){
        // 从本地获取收藏列表
        let str =  localStorage.getItem("ALL");
        let token =  localStorage.getItem("AUTO_TOKEN");
        if(token) {
           this.isLogin = true;//表示已经登录
            if(str) {
               let arr = JSON.parse(str);
               if(arr[token] && arr[token].songs) {
                  // 赋值
                  let songs = arr[token].songs;
                  this.result = songs;
                  // 更新本地歌曲
                  localStorage.setItem("SKY_SONGS",JSON.stringify(songs))
               }
            }
        }
    }
}

</script>